<template>
	<view class="grid ss-flex ss-flex-wrap">
		<view :class="['title',{'last-title':(index + 1) == data.col }]" v-for="(item, index) in data.titleArr" :key="index"
			:style="{ 
				width: itemWidth,
				marginLeft:(index > 0 ? data.space : 0) + 'px',
				borderRadius:data.radius + 'px',
			}">
			<div class="title-text">{{ item.title.text }}</div>
			<div class="title-bg" :style="{
					background: `linear-gradient(90deg, ${data.titleStyle?.color1 || '#fff'} 0%, ${data.titleStyle?.color2 || '#fff'} 100%)`,
					width: `${100 * data.col}%`,
					left:  (-100 * index) + '%',
			}"></div>
		</view>
		<button class="ss-reset-button grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center"
			v-for="(item, index) in data.list" :key="index" @tap="go(item)" 
			:style="{
				width:itemWidth,
				background : item.color,
				marginTop: data.space + 'px',
				marginLeft:((index > 0 && index% data.col > 0) ? data.space : 0) + 'px',
				borderRadius:data.radius + 'px',
			}">
			<image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
			<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
				<view class="grid-text" :style="[{ color: item.title.color }]">
					{{ item.title.text }}
				</view>
			</view>
		</button>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		watch,
		computed,
		onMounted
	} from 'vue';
	import {
		showAuthModal
	} from '@/sheep/hooks/useModal';

	function go(item) {
		// #ifdef MP-WEIXIN
		if(item.isMp == 1){
				  uni.navigateToMiniProgram({
				    appId: item.mp.appid,
				    path: item.mp.path,
				    envVersion:'release',
				    complete(res) {
				      // 打开成功
				      console.log('navigateToMiniProgram',res);
				    },
				  });
		}else{
				  sheep.$router.go(item.url)
		}
		// #endif
		// #ifndef MP-WEIXIN
		sheep.$router.go(item.url)
		// #endif
	}

	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
	});
	const itemWidth = computed(()=>`calc((100% - ${ (props.data.col - 1)*props.data.space }px) / ${props.data.col})`)

	onMounted(() => {
	
	})
</script>

<style lang="scss" scoped>

	.grid{
		.last-title{
			border-top-right-radius: 10rpx !important;
		}
		.title{
			height: 64rpx;
			position: relative;
			text-align: center;
			overflow: hidden;
			&:first-child{
				border-top-left-radius: 10rpx !important;
			}
			.title-text{
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 1;
				font-size: 26rpx;
				font-weight: 500;
			}
			.title-bg{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
			}
		}
		.grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 120rpx;
			.menu-image {
				width: 60rpx;
				height: 60rpx;
			}
			.title-box {
				font-size: 26rpx;
				margin-top: 10rpx;
				line-height: 1;
			}
		}
	}


</style>